<template>
  <div class="secirity">
    <div class="topNav">
      <van-nav-bar
        title="安全中心"
        left-text="返回"
        left-arrow
        @click-left="quit"
      />
    </div>
    <div class="bgimg">
      <img src="../assets/images/bg3.png" alt="" />
    </div>
    <div class="content">
      <van-cell is-link title="修改密码" @click="showPopup" />
      <van-cell is-link title="注销账户" @click="destroyAccount" />
    </div>
    <div class="changePwd">
      <van-popup
        v-model="show"
        position="bottom"
        closeable
        :style="{ height: '40%' }"
      >
        <h3>修改密码</h3>
        <van-form @submit="onSubmit">
          <van-field
            v-model="oldPwd"
            :type="oldflag == false ? 'password' : 'text'"
            name="oldPwd"
            label="旧密码"
            placeholder="请输入旧密码(首字母必须为字母)"
            :right-icon="oldflag == false ? 'closed-eye' : 'eye-o'"
            @click-right-icon="clickToggle('oldflag')"
            autocomplete="off"
          />
          <van-field
            v-model="newPwd"
            :type="newflag == false ? 'password' : 'text'"
            name="newPwd"
            label="新密码"
            placeholder="请输入新密码(首字母必须为字母)"
            :right-icon="newflag == false ? 'closed-eye' : 'eye-o'"
            @click-right-icon="clickToggle('newflag')"
            autocomplete="off"
          />
          <div style="margin: 16px">
            <van-button round block type="info" native-type="submit"
              >提交</van-button
            >
          </div>
        </van-form>
      </van-popup>
    </div>
    <div class="quitBtn">
      <van-button type="primary" size="large" @click="quitLogin"
        >退出登录</van-button
      >
    </div>
  </div>
</template>

<script>
export default {
  name: "Secirity",
  data() {
    return {
      show: false,
      oldPwd: "",
      newPwd: "",
      newflag: false,
      oldflag: false,
    };
  },
  methods: {
    quit() {
      this.$router.go(-1);
    },
    // 修改密码弹出层
    showPopup() {
      this.show = true;
    },
    // 修改密码
    onSubmit(values) {
      let psdCheck = /^[A-Za-z][A-Za-z\d]{5,15}$/;
      if (!psdCheck.test(values.newPwd)) {
        this.$toast("请输入正确的密码");
        return;
      }
      if (!psdCheck.test(values.oldPwd)) {
        this.$toast("请输入正确的密码");
        return;
      }
      let token = this.$cookies.get("TOKEN");

      this.axios({
        method: "POST",
        url: "/updatePassword",
        data: {
          tokenString: token,
          password: values.newPwd,
          oldPassword: values.oldPwd,
        },
      })
        .then((res) => {
          if (res.data.code == 700) {
            //用户未登录, 拦截操作, 通知用户去登录
            this.$toast("请先登录");
            setTimeout(() => {
              this.$router.push({ name: "Login" });
            }, 2000);
            return;
          }
          this.$toast(res.data.msg);

          if (res.data.code === "E001") {
            setTimeout(() => {
              this.$router.push({ name: "Login" });
            }, 2000);
          }
        })
        .catch((err) => {});
    },
    // 修改密码是否可视
    clickToggle(flag) {
      this[flag] = !this[flag];
    },
    // 退出登录
    quitLogin() {
      let token = this.$cookies.get("TOKEN");
      this.axios({
        method: "POST",
        url: "/logout",
        data: {
          tokenString: token,
        },
      })
        .then((res) => {
          this.$toast(res.data.msg);
          if (res.data.code === "F001") {
            setTimeout(() => {
              this.$router.push({ name: "Login" });
            }, 2000);
          }
        })
        .catch((err) => {});
    },
    // 注销用户
    destroyAccount() {
      this.$dialog
        .confirm({
          title: "是否确认注销账户？",
          message: "一旦注销将无法更改，请谨慎选择",
        })
        .then(() => {
          //发起确认收货请求

          let token = this.$cookies.get("TOKEN");
          this.axios({
            method: "POST",
            url: "/destroyAccount",
            data: {
              tokenString: token,
            },
          })
            .then((res) => {
              this.$toast(res.data.msg);

              if (res.data.code === "G001") {
                setTimeout(() => {
                  this.$router.push({ name: "Login" });
                }, 2000);
              }
            })
            .catch((err) => {});
        })
        .catch((err) => {});
    },
  },
};
</script>

<style lang="less" scoped>
.secirity {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgb(247, 247, 247);
}
.topNav {
  position: sticky;
  top: 0;
  /deep/ .van-nav-bar__text {
    color: #0c34ba;
  }
  /deep/ .van-nav-bar .van-icon {
    color: #0c34ba;
  }
}
.bgimg {
  width: 100%;
  img {
    width: 100%;
  }
}
.content {
  background-color: white;
  position: fixed;
  top: 140px;
  left: 0;
  right: 0;
  margin: 10px;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  padding: 5px;
  box-sizing: border-box;
  padding-top: 10px;
  font-size: 14px;
}
.changePwd {
  h3 {
    padding: 0 15px;
  }
  /deep/ .van-button {
    background-color: #0c34ba;
    border-color: #0c34ba;
    margin-top: 40px;
  }
  /deep/ .van-form {
    margin: 40px 5px 0 5px;
  }
}
.quitBtn {
  /deep/ .van-button {
    position: absolute;
    width: 95%;
    top: 350px;
    left: 2.5%;
    border-radius: 25px;
    background-color: #0c34ba;
    border-color: #0c34ba;
  }
}
</style>